<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--引入easyui的样式 -->
<link rel="stylesheet"  type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet"  type="text/css" href="../themes/icon.css">
<!-- js文件 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
<title>学生信息增删改查</title>
</head>
<script type="text/javascript">

/* page页面显示  分页 */
$(function(){
	//更改底部工具栏
	var pager = $('#StuList').datagrid('getPager');	
	  pager.pagination({
		pageList: [10,20,30],
	});
})
/* 删除学生信息 */
$(function(){
	/* 获得被选中的学生信息id */
	$("#deleteStu").click(function(){
		var ss = [];
		var rows = $('#StuList').datagrid('getSelections');
		for(var i=0; i<rows.length; i++){
			var row = rows[i];
			/* 把被选中的学生id放进数组 */
			ss.push(row.sid);
		}
		if(ss.length==0){
  			$.messager.show({
  				title:'警告',
  				msg:'请选中需要删除的数据',
  				timeout:1000,
  				showType:'slide',
  				style:{		
  					right:''
  				}
  			});
  		}else{
  			$.messager.confirm('学生数据确认', '确认是否删除'+ss.length+'条数据', function(r){
  				if (r){
  					$.ajax({
  		  				//选择提交方式
  		  				type:"post",
  		  				//发送的url请求
  		  				url:"getStudentDelete",
  		  				//需要发送的数据 ss没定义数据类型不能直接发送
  		  				data:{"getStudentDeleteIds":ss+""},
  		  				//数据格式
  		  				dataType:"text",
  		  				//发送成功时跳转
  		  				success:function(data){
  		  					location.reload();
  		  				}
  		  			})
  				}else{
  					/* 取消所有选中的项目 */
  					$("#StuList").datagrid('uncheckAll');
  				}
  			});
  		}		
	})
})

/* 添加学生信息  */
$(function(){
	/* 弹出添加窗口  */
	$("#appendStu").click(function(){
		$("#StuList").datagrid('uncheckAll');
		$("#dlg").dialog("open");
	})
	$("#closeAppendStu").click(function(){
		$('#ff').form('clear');
		$("#dlg").dialog("close");
	})
	/* 点击提交 */
	$("#saveAppendStu").click(function(){
		$('#ff').form({
		    url:"getStudentAppend",
		    onSubmit: function(){
		    	return $(this).form('enableValidation').form('validate');
		    },
		    success:function(data){
		    	if(data){
		    		location.reload();
		    	}else{
		    		alert("添加失败");
		    	}
		    }
		});
		// submit the form    
		$('#ff').submit();
	})
	
})

/* 修改学生信息 */
 /* 使学生信息可直接修改 */
$.extend($.fn.datagrid.methods, {
	editCell: function(jq,param){
		return jq.each(function(){
			var opts = $(this).datagrid('options');
			var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor1 = col.editor;
				if (fields[i] != param.field){
					col.editor = null;
				}
			}
			$(this).datagrid('beginEdit', param.index);
			var ed = $(this).datagrid('getEditor', param);
			if (ed){
				if ($(ed.target).hasClass('textbox-f')){
					$(ed.target).textbox('textbox').focus();
				} else {
					$(ed.target).focus();
				}
			}
			for(var i=0; i<fields.length; i++){
				var col = $(this).datagrid('getColumnOption', fields[i]);
				col.editor = col.editor1;
			}
		});
	},
	enableCellEditing: function(jq){
		return jq.each(function(){
			var dg = $(this);
			var opts = dg.datagrid('options');
			opts.oldOnClickCell = opts.onClickCell;
			opts.onClickCell = function(index, field){
				if (opts.editIndex != undefined){
				if (dg.datagrid('validateRow', opts.editIndex)){
					dg.datagrid('endEdit', opts.editIndex);
					opts.editIndex = undefined;
				} else {
					return;
				}
			}
			dg.datagrid('selectRow', index).datagrid('editCell', {
				index: index,
				field: field
			});
			opts.editIndex = index;
			opts.oldOnClickCell.call(this, index, field);
			}
		});
	}
});
$(function(){
	$('#StuList').datagrid().datagrid('enableCellEditing');
})
/* 获取当前页面学生信息  */
$(function(){
	$("#updateStu").click(function(){
		$.messager.confirm('学生数据确认', '确认是否修改', function(r){
			if (r){
				$('#StuList').datagrid('acceptChanges');
				$('#StuList').datagrid('selectAll');
				var ss = [];
				var rows = $('#StuList').datagrid('getSelections');
				for(var i=0; i<rows.length; i++){
					var row = rows[i];
					/* 把被选中的学生放进数组 */
					ss.push('{"sid":'+row.sid+',"sname":"'+row.sname+'","scollege":"'+row.scollege+'","hid":"'+row.hid+'","ssex":"'+row.ssex+'","sage":'+row.sage+',"saddress":"'+row.saddress+'","sphone":"'+row.sphone+'"}');
				}
				jsonArray='['+ss+']';
				var js=JSON.parse(jsonArray);
				$.ajax({
						//选择提交方式
						type:"post",
						//发送的url请求
						url:"getStudentsUpdate",
						//需要发送的数据 ss没定义数据类型不能直接发送
						data:{"students":JSON.stringify(js)},
						//数据格式
						dataType:"text",
						//发送成功时跳转
						success:function(data){
							location.reload();
						}
					})
				}else{
					/* 取消所有选中的项目 */
					$("#StuList").datagrid('uncheckAll');
					$("#StuList").datagrid('rejectChanges');
				}
		})
	})
})
/* 取消操作 */
$(function(){
	$("#reject").click(function(){
		$("#StuList").datagrid('uncheckAll');
		$("#StuList").datagrid('rejectChanges');
	})
}) 
 
</script>
<body>

	<!--                           展示学生信息                                                                     -->
	 <table id="StuList" title="学生信息查询" class="easyui-datagrid"
            toolbar="#toolbar" pagination="true" fit="true" 
            data-options="url:'getAllStudent',method:'post'" striped="true"
            rownumbers="true" fitColumns="true" border="false">
        <thead>
            <tr>
                <th field="ck" checkbox=true></th>
                <th field="sid" width='50' resizable='false'>学号</th>
                <th field="sname" width='50' resizable='false' data-options="editor:'text'">姓名</th>
                <th field="scollege" width='50' resizable='false' data-options="editor:'text'">所在学院</th>
                <th field="hid" width='50' resizable='false'>宿舍号</th>
                <th field="ssex" width='50' resizable='false' data-options="editor:{
							type:'combobox',
							options:{
								valueField:'label',
								textField:'value',
								data: [{label: '男',value: '男'},{label: '女',value: '女'}],
								required:true
							}}">性别</th>
                <th field="sage" width='50' resizable='false' data-options="editor:'numberbox'">年龄</th>
                <th field="saddress" width='50'resizable='false' data-options="editor:'text'">家庭地址</th>
                <th field="sphone" width='50' resizable='false' data-options="editor:'numberbox'">联系电话</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a id="appendStu" class="easyui-linkbutton" iconCls="icon-add" plain="true">增加</a>
        <a id="updateStu" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a id="deleteStu" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        <a id="reject" class="easyui-linkbutton" iconCls="icon-undo" plain="true">取消</a>
    </div>
    
    <!--                              添加学生信息                                                  -->
    <div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:400px;padding:10px"
			data-options="
				closed: 'true',
				iconCls: 'icon-save',
				buttons: '#dlg-buttons',
				maximizable: 'true',
				modal:'true'
			">
			<div class="easyui-panel" style="width: 100%;height:100%">
			<div style="padding: 10px 60px 20px 60px">
				<form id="ff" method="post">
					<table cellpadding="5">
						<tr>
							<td>学号:</td>
							<td><input class="easyui-textbox" type="text" name="sid"
								data-options="required:true"></input></td>
						</tr>
						<tr>
							<td>姓名:</td>
							<td><input class="easyui-textbox" type="text" name="sname"
								data-options="required:true"></input></td>
						</tr>
						<tr>
							<td>学院:</td>
							<td><input class="easyui-textbox" type="text" name="scollege"
								data-options="required:true"></input></td>
						</tr>
						<tr>
							<td>性别:</td>
							<td><select class="easyui-combobox" name="ssex"><option value="男">男</option><option value="bg">女</option></td>
						</tr>
						<tr>
							<td>年龄:</td>
							<td><input class="easyui-textbox" type="text" name="sage"
								data-options="required:true"></input></td>
						</tr>
						<tr>
							<td>家庭住址:</td>
							<td><input class="easyui-textbox" type="text" name="saddress"
								data-options="required:true"></input></td>
						</tr>
						<tr>
							<td>联系电话:</td>
							<td><input class="easyui-textbox" type="text" name="sphone"
								data-options="required:true"></input></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
	<div id="dlg-buttons">
		<a id="saveAppendStu" href="#" class="easyui-linkbutton">提交</a>
		<a id="closeAppendStu" href="#" class="easyui-linkbutton">取消</a>
	</div>
</body>
</html>